<template>
    <div class="root" ref="root">
        <div class="nav-wrapper-lefttoright">
<!--             <div class="nav-sidebar" v-show="!shrinkPage">
                <div class="title-wrapper-one">
                    <div class="title-icon">
                        <img src="../assets/logo.png" alt="" class="icon-img">
                    </div>
                    <div class="title-text-one">
                        <span>时间胶囊</span>
                    </div>
                </div>
                <div class="sidebar-content">
                    <div class="content-btn" @click="ActivityControl">
                        <van-icon name="manager" style="marginRight: 6px; marginTop: 3px;"/>
                        <span>活动管理</span>
                    </div>
                    <div class="report-btn">
                        <van-icon name="eye" style="marginRight: 6px; marginTop: 3px; color: #4093de;"/>
                        <span>举报管理</span>
                    </div>
                </div>
            </div> -->
            <div class="nav-body">
                <div class="nav-header">
                    <div class="mobile-icon" @click="beforeShowNav">
                        <van-icon name="bars" size="27"/>
                    </div>
                    <div class="title-wrapper-two">
                        <div class="title-text-two">
                            <span>&nbsp;&nbsp;后台管理系统</span>
                        </div>
                        <div class="title-text-three">
                            <span>&nbsp;/</span>
                        </div>
                        <div class="title-text-four">
                            <span>&nbsp;举报管理</span>
                        </div>
                    </div>
                </div>
                <div class="nav-content">
                    <div class="content-wrapper">
                        <div class="every-content" v-for="r in reportList">
                            <div class="left-content" v-show="r.condition==1">
                                <div class="report-user">
                                    <div class="user-name">{{r.uid}}</div>
                                    <div class="user-icon">{{r.counts}}</div>
                                </div>
                                <el-tag class="reason-tag" size="small" style="marginTop: 5px;">举报理由</el-tag>
                                <div class="report-reason">{{r.reason}}</div>
                            </div>
                            <div class="left-content" v-show="r.condition==0">
                                <div class="report-user">
                                    <div class="user-name" style="color: #bbbbbb;">{{r.uid}}</div>
                                    <div class="user-icon" style="backgroundColor: #5c5c5c;">{{r.counts}}</div>
                                </div>
                                <el-tag class="reason-tag" size="small" type="info" style="marginTop: 5px;">举报理由</el-tag>
                                <div class="report-reason" style="color: #bbbbbb;">{{r.reason}}</div>
                            </div>
                            <div class="middle-content" v-show="r.condition==1">
                                <el-scrollbar class="user-speech">
                                    <span>{{r.content}}</span>
                                </el-scrollbar>
                            </div>
                            <div class="middle-content" v-show="r.condition==0" style="color: #bbbbbb; borderLeft: 3px solid #bbbbbb; borderRight: 3px solid #bbbbbb;">
                                <el-scrollbar class="user-speech">
                                    <span>{{r.content}}</span>
                                </el-scrollbar>
                            </div>
                            <div class="right-content">
                                <div class="del-icon" @click="showConfirmDel = true" v-show="r.condition">
                                    <van-icon name="delete-o" color="#e04f3c" size="23" v-show="!isMobile"/>
                                    <van-icon name="delete-o" color="#e04f3c" size="16" v-show="isMobile"/>
                                </div>
                                <div class="del-txt" @click="showConfirmDel = true" v-show="r.condition==1">
                                    <span>删除</span>
                                </div>
                                <div class="del-txt" v-show="r.condition==0" style="color: #bbbbbb; cursor: auto;">
                                    <span>已删除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <van-dialog v-model:show="showConfirmDel" title="注意" show-cancel-button>
                        <div style="fontSize: 16px; margin: 8px 6px 8px 6px; textAlign: center;">
                            <span>删除后，该用户将收到消息通知，是否确认删除？</span>
                        </div>
                </van-dialog>
                <el-drawer v-model="showNav" direction="ltr" :show-close="false">
                        <div class="nav-sidebar">
                            <div class="sidebar-content">
                                <div class="content-btn" @click="ActivityControl" style="color: black;">
                                    <van-icon name="manager" style="marginRight: 6px; marginTop: 3px;"/>
                                    <span>活动管理</span>
                                </div>
                                <div class="report-btn" style="color: #4093de;">
                                    <van-icon name="eye" style="marginRight: 6px; marginTop: 3px;  color: #4093de;"/>
                                    <span>举报管理</span>
                                </div>
                            </div>
                        </div>
                </el-drawer>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted,computed,watch } from 'vue';
import router from '../router';
import { useGlobalData } from '../store/index';
import { getReportedCapsule } from "../request/api";
const GlobalData = useGlobalData();
const root = ref<HTMLElement>();
var showConfirmDel = ref<boolean>(false);
var shrinkPage = computed(() => {
    return GlobalData.width <= 803;
})
var isMobile = computed(() => {
    return GlobalData.width < 487;
})
var showNav = ref<boolean>(false);
let fontSize_one:string = '20px';
let fontSize_two:string = '19px';
let fontSize_three:string = '18.5px';
let fontSize_four:string = '14px';
let fontSize_five:string = '16px';
let fontSize_six:string = '17px';
interface ReportList {
    uid: string,
    counts: string,  //举报次数
    reason: string,
    content: string, //发言内容
    capsuleKey: string,
    condition: 0 | 1, //1是未删除，0是已经被删除
}
var reportList =ref<ReportList[]>([]);
const ActivityControl = () => {
    router.push({
        name: 'activityControl',
    })
}
const handleResize = () => {
    GlobalData.width = root.value?.clientWidth as number;
    GlobalData.height = root.value?.clientHeight as number;
}
const beforeShowNav = () => {
    showNav.value = true;
}
window.addEventListener('resize',() => handleResize());
watch(isMobile,(newVal) => {
    if(newVal == true){
        fontSize_one = '17px';
        fontSize_two = '16px';
        fontSize_three = '15.5px';
        fontSize_four = '11px';
        fontSize_five = '13px';
        fontSize_six = '12px';
    }
},{
    immediate:true,
})
onMounted(() => {
    handleResize();
    getReportedCapsule().then((res:any) => {
        console.log(res);
        let len = res.result.length;
        for(let i=0;i<len;i++) {
            reportList.value.push({...res.result[i], condition: 1})
        }
    })
})
</script>
<style lang="less">
    :root{
        --van-tag-font-size: 9px !important;
        --van-dialog-font-size: 14px !important;
        --van-calendar-popup-height: 100% !important;
    }
    .el-tag--small{
        padding: 0 0.012rem !important;
        height: 0.32rem;
    }
    .el-drawer{
        --el-drawer-padding-primary: 0px;
        width: auto !important;
        .nav-sidebar{
            background-color: white !important;
        }
    }
</style>
<style scoped lang="less">
    .root{
        height: 100%;
        .nav-wrapper-lefttoright{
            display: flex;
            height: 100%;
            .nav-sidebar{
                background-color: #55ccc9;
                width: 180px;
                .title-wrapper-one{
                    display: flex;
                    height: 34px;
                    border-bottom: 2px solid rgb(100, 214, 210);
                    .title-icon{
                        display: flex;
                        height: 25px;
                        width: 25px;
                        align-self: center;
                        margin-left: 25px;
                        margin-top: 3px;
                        .icon-img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .title-text-one{
                        margin-left: 5px;
                        font-size: v-bind(fontSize_one);
                        line-height: 36px;
                        font-weight: bold;
                        color: white;
                    }
                }
                .sidebar-content{
                    display: flex;
                    flex-direction: column;
                    .content-btn{
                        color: white;
                        font-size: v-bind(fontSize_two);
                        height: 36px;
                        line-height: 36px;
                        padding: 0px 20px 0px 40px;
                    }
                    .report-btn{
                        color: #4093de;
                        font-size: v-bind(fontSize_two);
                        height: 36px;
                        line-height: 36px;
                        padding: 0px 20px 0px 40px;
                    }
                    .content-btn:hover{
                        background-color: #d9d9d9;
                        cursor: pointer;
                    }
                    .report-btn:hover{
                        background-color: #d9d9d9;
                        cursor: pointer;
                    }
                }
            }
            .nav-body{
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 100%;
                .nav-header{
                    display: flex;
                    width: 100%;
                    height: 34px;
                    background-color: white;
                    border-bottom: 2px solid rgb(243, 244, 245);
                    .mobile-icon{
                        align-self: center;
                        margin-left: 4px;
                        cursor: pointer;
                    }
                    .title-wrapper-two{
                        display: flex;
                        .title-text-two{
                            font-size: v-bind(fontSize_one);
                            line-height: 36px;
                        }
                        .title-text-three{
                            font-size: v-bind(fontSize_one);
                            line-height: 36px;
                            color: rgb(151, 168, 190);
                        }
                        .title-text-four{
                            font-size: v-bind(fontSize_one);
                            line-height: 36px;
                            color: rgb(151, 168, 190);
                        }
                    }
                }
                .nav-content{
                    height: 100%;
                    .content-wrapper{
                        height: 100%;
                        .every-content{
                            display: flex;
                            width: 95%;
                            margin-left: 2.5%;
                            height: 70px;
                            margin-top: 10px;
                            border-radius: 7px;
                            box-shadow: 1px 3px 3px rgb(237, 210, 210);
                            border: 0.1px solid rgb(237, 210, 210);
                            .left-content{
                                display: flex;
                                flex-direction: column;
                                margin: 5px 0px 5px 5px;
                                width: 120px;
                                .report-user{
                                    display: flex;
                                    .user-name{
                                        font-size: v-bind(fontSize_two);
                                        margin-left: 3.5px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .user-icon{
                                        width: 16px;
                                        height: 16px;
                                        background-color: #d93232;
                                        color: white;
                                        margin-left: 4px;
                                        margin-top: 1.3px;
                                        border-radius: 100%;
                                        text-align: center;
                                        line-height: 16px;
                                        font-size: v-bind(fontSize_three);
                                    }
                                }
                                .reason-tag{
                                    font-size: v-bind(fontSize_four);
                                }
                                .report-reason{
                                    margin-top: 1.5px;
                                    padding-left: 3px;
                                    display: -webkit-box;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                }
                            }
                            .middle-content{
                                flex-grow: 1;
                                margin: 5px;
                                padding-left: 7px;
                                padding-right: 7px;
                                font-size: v-bind(fontSize_five);
                                border-left: 2px solid #939393;
                                border-right: 2px solid #939393;
                            }
                            .right-content{
                                display: flex;
                                margin: 5px 5px 5px 0px;
                                width: 40px;
                                .del-icon{
                                    align-self: center;
                                }
                                .del-txt{
                                    color: #e04f3c;
                                    font-size: v-bind(fontSize_six);
                                    align-self: center;
                                    line-height: 25px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .del-icon:hover,.del-txt:hover{
                                    cursor: pointer;
                                }
                            }
                        }
                        .every-content:hover{
                            transform: scale(1.01);
                        }
                    }
                }
            }
        }
    }
</style>